.sidebar {
  position: fixed; /* 固定定位，使侧边栏悬浮在页面上，不随滚动条滚动 */
  top: 100px; /* 距离页面顶部100px */
  left: 20px; /* 距离页面左侧20px */
  width: 160px; /* 宽度设为160px */
  background-color: white; /* 背景颜色为白色 */
  border-radius: 12px; /* 圆角边框，弧度为12px */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 阴影效果，制造悬浮感 */
  padding: 20px 0; /* 上下内边距为20px，左右为0 */
  z-index: 999; /* 层级很高，确保它显示在其他元素上面 */
  border-bottom: 4px solid #c1c1c1; /* 底部灰色边框，起分隔作用 */
}

.sidebar::before {
  content: ''; /* 生成一个空内容的伪元素，用来创建顶部蓝条 */
  position: absolute; /* 绝对定位，相对于.sidebar定位 */
  top: 0; /* 贴着顶部 */
  left: 0; /* 贴着左边 */
  height: 20px; /* 蓝条的高度为20px */
  width: 100%; /* 宽度占据整个侧边栏 */
  background-color: #409eff; /* 蓝条颜色 */
  border-top-left-radius: 12px; /* 左上角圆角，与.sidebar一致 */
  border-top-right-radius: 12px; /* 右上角圆角，与.sidebar一致 */
}

.nav-list {
  list-style: none; /* 去除默认的列表样式（如小圆点） */
  margin: 0; /* 外边距为0 */
  padding: 0; /* 内边距为0 */
}

.nav-list li {
  padding: 14px 24px; /* 每项上下内边距14px，左右24px */
  font-size: 20px; /* 字体大小为16px */
  color: #333; /* 字体颜色为深灰色 */
  cursor: pointer; /* 鼠标悬停时变为小手，表示可点击 */
  transition: background-color 0.2s ease; /* 背景色过渡动画0.2秒，增强交互感 */
}

.nav-list li:hover {
  background-color: #f0f0f0; /* 悬停时背景变为浅灰色 */
  color: #409eff; /* 字体颜色变为蓝色 */
}
